<template>
  <div>
    <van-nav-bar
      :title="querInfo.isme"
      left-text="返回"
      right-text="筛选"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showuser = true"
    />
    <el-table stripe show-summary :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column
        prop="_id.username"
        label="姓名"
        width="60px"
      ></el-table-column>
      <el-table-column
        prop="_id.giftName"
        label="礼品名称"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="录入数量"
        width="50px"
      ></el-table-column>
      <el-table-column
        prop="getNum"
        label="出库数量"
        width="50px"
      ></el-table-column>
      <el-table-column
        prop="use"
        label="使用数量"
        width="100"
      ></el-table-column>
      <el-table-column label="剩余数量">
        <template v-slot="scope">
          <span>{{ scope.row.num - scope.row.getNum - scope.row.use }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 人物选择 -->
    <van-overlay :show="showuser" @click="showuser = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <van-cell title="选择日期区间" :value="date" @click="show = true" />
          <van-calendar
            v-model="show"
            type="range"
            :min-date="new Date(2020)"
            @confirm="onConfirm"
            :show-confirm="false"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="querInfo.isme"
            label="条件"
            placeholder="点击选择城市"
            @click="showagg = true"
          />

          <div class="footerbutton">
            <van-button round type="warning" @click="getBtn">确认</van-button>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-popup v-model="showagg" position="bottom">
      <van-picker
        show-toolbar
        :columns="agg"
        @confirm="selectagg"
        @cancel="showagg = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { Toast, Notify } from 'vant'
export default {
  data() {
    return {
      // 礼品列表
      tableData: [],
      //   人物选择
      showuser: false,
      date: '',
      show: false,
      querInfo: {
        isme: '我的统计',
      },
      showagg: false,
      agg: ['我的统计', '下级统计'],
    }
  },
  created() {
    this.gettotal()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.querInfo.date = date
    },
    selectagg(value) {
      this.querInfo.isme = value
      this.showagg = false
    },
    getBtn() {
      if (this.querInfo.isme == '我的统计') {
        this.gettotal()
      } else if (this.querInfo.isme == '下级统计') {
        this.othertotal()
      }
    },
    async gettotal() {
      const { data: res } = await this.$http.post('/hx/mygift', this.querInfo)
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.tableData = res.data
    },
    async othertotal() {
      const { data: res } = await this.$http.post(
        '/hx/otherstatistical',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.tableData = res.data
    },
  },
}
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  position: relative;
  text-align: center;
  width: 200px;
  height: 160px;
  background-color: #fff;
  .footerbutton {
    position: absolute;
    bottom: 10px;
    left: 40px;
    .van-button {
      width: 60px;
    }
  }
}
</style>